{% extends 'home.html' %}

{% block content %}
    <div class="row">
        <div class="panel panel-primary">
            <div class="panel-heading">KFC</div>
            <div class="panel-body">
                
                <table class="table table-condensed"
                       data-toggle="table"
                       id="table"
                       data-toolbar="#toolbar"
                       data-search="true"
                       
                       data-click-to-select="true"
                       data-minimum-count-columns="2">
                    <thead>
                    <tr>
                        <th>证书编号</th>
                        <th>校准日期</th>
                        <th>客户</th>
                        <th>序列号</th>
                        <th>仪器型号</th>
                        <th>校准人</th>
                        <th>证书状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for item in queryset %}
                        <tr data-type="{{ item.type }}" data-id="{{ item.id }}" data-unique-id="{{ item.id }}">
                            <td id="type">{{ item.c_number }}</td>
                            <td>{{ item.date }}</td>
                            <td>{{ item.all_data.A1PH_Zsdw53 }}</td>
                            <td>{{ item.all_data.A1PH_SN04 }}</td>
                            <td>{{ item.all_data.A1PH_ProdModel03 }}</td>
                            <td>{{ item.all_data.calibrator }}</td>
                            {% if item.approve == 1 %}
                                <td>
                                    <a class="btn btn-primary btn-xs"
                                       href="/approve/{{ item.type }}/{{ item.id }}/view/"
                                       id="view">审批</a>
                                </td>
                            {% else %}
                                <td>{{ item.get_approve_display }}</td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <ul class="pagination pagination-sm">
                    {{ page_string|safe }}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script type="text/javaScript">
        function doExport() {
            $('#table').tableExport({
                    type: 'excel'
                }
            );
        }
    </script>
    <script>
        var $table = $("#table");
        $(function () {
            $("#toolbar")
                .find("select")
                .change(function () {
                    $table.bootstrapTable("destroy").bootstrapTable({
                        exportDataType: $(this).val(),
                        exportTypes: ["json", "xml", "csv", "txt", "sql", "excel", "pdf"],
                        columns: [
                            {
                                field: "state",
                                checkbox: true,
                                visible: $(this).val() === "selected",
                            },
                        ],
                    });
                })
                .trigger("change");
        });
    </script>

    <script>
        $(function () {
            $('#syn').click(function () {
                $.ajax({
                    url: '/list/{{ item.type }}/{{ item.id }}/syn/',
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.success) {
                            location.href = 'http://127.0.0.1:8000/list/';
                            alert('chenggong');
                        } else {
                            alert('创建失败');
                        }
                    }
                })
            })
        })
    </script>

    <!-- 新增：jQuery实现文件下载并刷新页面 -->
    <script>
        $(document).ready(function () {
            // 为所有下载按钮绑定点击事件
            $('.download-btn').click(function (e) {
                e.preventDefault(); // 阻止默认行为
                const downloadUrl = $(this).data('url'); // 获取下载链接

                // 创建隐藏的iframe用于触发文件下载
                const iframe = $('<iframe>', {
                    src: downloadUrl,
                    style: 'display:none;'
                }).appendTo('body');

                // 下载完成后延迟刷新页面
                setTimeout(function () {
                    location.reload(); // 刷新页面
                    iframe.remove(); // 移除iframe
                }, 1000); // 延迟1秒，确保文件下载完成
            });
        });
    </script>

    <!-- 修改：优化批量下载功能 -->
    <script>
        $(document).ready(function () {
            // 批量下载
            $('#batchDownload').click(function(){
                const selectedRows = $table.bootstrapTable('getSelections');
                console.log('选中的行数据:', selectedRows);
                if(selectedRows.length === 0) {
                    alert('请至少选择一条记录');
                    return;
                }

                // 递归点击下载按钮
                function clickNext(index) {
                    if(index >= selectedRows.length) {
                        // 全部下载完成后延迟刷新页面
                        setTimeout(function() {
                            location.reload();
                        }, 1500);
                        return;
                    }
                    
                    const row = selectedRows[index];
                    console.log('正在处理行:', row);
                    
                    // 确保行元素存在且包含必要数据
                    if(!row || !row._data || !row._data.id) {
                        // 尝试从DOM获取行数据
                        const rowId = $table.bootstrapTable('getRowByUniqueId', row.id)?._data?.id || 
                                     $(`tr[data-id="${row.id}"]`).data('id');
                        if(!rowId) {
                            console.error('无效的行数据:', row);
                            clickNext(index + 1);
                            return;
                        }
                    }
                    
                    // 使用更可靠的方式获取行元素
                    const $rowElement = $table.bootstrapTable('getRowByUniqueId', row.id) || 
                                      $(`tr[data-id="${row.id}"]`);
                    if(!$rowElement || $rowElement.length === 0) {
                        console.error('未找到行元素:', row.id);
                        clickNext(index + 1);
                        return;
                    }
                    
                    const $downloadBtn = $($rowElement).find('.download-btn');
                    if($downloadBtn.length === 0) {
                        console.error('该记录不支持下载:', row.id);
                        clickNext(index + 1);
                        return;
                    }
                    
                    console.log('触发下载按钮:', index);
                    $downloadBtn.trigger('click');
                    
                    // 增加间隔时间确保下载完成
                    setTimeout(function() {
                        clickNext(index + 1);
                    }, 1000);
                }
                
                // 开始批量下载
                clickNext(0);
            });
        });
    </script>
{% endblock %}